<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="main-box w100 flex-row-center" style="height: 100vh;">
		<view class="activity-head">
			<!-- <image src="../../static/main/head-bg.png" class="head-bg" mode="widthFix"></image> -->
			<view class="w100 name-box">
				<text class="activity-head-name">赛事活动</text>
				<text class="activity-head-enName">EVENT ACTIVITIES</text>
			</view>
			<view class="tab-list w100">
				<up-tabs @change="changeTab" heigth='22rpx' :activeStyle="{
					'fontWeight': 'bold',
					'fontSize': '30rpx',
					'color': 'rgba(255,255,255,0.87)'
				}" lineColor="linear-gradient( 270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%)" :inactiveStyle="{
				 	'fontWeight': 500,
				 	'fontSize': '30rpx',
				 	'color': 'rgba(255,255,255,0.6)'
				 }" :itemStyle="{
					 height:'68rpx'
				 }" :list="tabList"></up-tabs>
			</view>
		</view>
		<!-- 内容 -->
		<view class="main w100" style="flex-grow: 1;">
			<scroll-view :scroll-top="scrollTop" @refresherrefresh="onRefresh" refresher-default-style="white"
				@scrolltolower="scrolltolower" refresher-enabled scroll-y="true"
				:refresher-triggered="matchInfo.triggered" style="width: 100%;height: 100%;" class="scroll-Y">
				<template v-if="itemLoading">
					<view v-for="num in 3" :key="num" style="margin-bottom: 16rpx;">
						<uv-skeletons loading :skeleton="skeleton"></uv-skeletons>
					</view>
				</template>
				<template v-else>
					<template v-if="matchInfo.list.length>0">
						<activityItemVue :matchInfo="item" v-for="(item,index) in matchInfo.list" :key="item.m_id">
						</activityItemVue>
						<view class="view-more">
							<up-loadmore :status="matchInfo.status" />
						</view>
					</template>
					<view class="not-list-view" v-else>
						<text class="text">暂时没有赛事数据~</text>
					</view>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import activityItemVue from '../../components/activity/activityItem.vue';
	import {
		userInfoStore
	} from '../../stores/user';
	import {
		chooseLocation
	} from '@/utils/chooseLocation';
	import {
		handleDistance,
		countDown,
		isMillisecondTimestamp
	} from '@/utils/utools.js';

	const userStore = userInfoStore();
	const status = ref('loading');
	const scrollTop = ref(0);
	const matchInfo = reactive({
		status: 'loadmore',
		page: 1,
		type: 1,
		list: [],
		triggered: false
	});
	const subsectionIndex = ref(0);
	const itemLoading = ref(true);
	const skeleton = [{
			type: 'flex',
			num: 1,
			style: 'alignItems: center',
			children: [{
				type: 'custom',
				num: 1,
				style: 'width:68rpx;height:68rpx;marginRight: 30rpx;borderRadius:50%;'
			}, {
				type: 'line',
				num: 1,
				style: 'width:100%;',
			}]
		},
		{
			type: 'flex',
			num: 1,
			style: 'marginTop:24rpx;marginBottom:24rpx;alignItems: center;display:flex;justifyContent: space-evenly;',
			children: [{
				type: 'custom',
				style: 'width:218rpx;height:196rpx;borderRadius:16rpx;'
			}, {
				type: 'custom',
				style: 'width:218rpx;height:196rpx;borderRadius:16rpx;'
			}, {
				type: 'custom',
				style: 'width:218rpx;height:196rpx;borderRadius:16rpx;'
			}]
		}, {
			type: 'line',
			num: 2,
			gap: '20rpx'
		}
	]
	const addressInfo = computed(() => userStore.addressInfo);
	const statusBarHeight = ref(0);
	const tabList = [{
			name: '距离',
			label: 1
		},
		{
			name: '时间',
			label: 2
		},
		{
			name: '人数',
			label: 3
		},
	]
	onLoad(async () => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
		if (addressInfo.value) {
			getMainMatchList();
		}
	})
	onShow(() => {
		// addressInfo.value = userStore.addressInfo;
	});
	const onRefresh = () => { //下拉刷新
		if (matchInfo.triggered) return;
		matchInfo.triggered = true;
		restList();
	};
	const scrolltolower = () => { //触底了
		getMoreList();
	}
	const getMoreList = () => {
		if (matchInfo.status === 'nomore' || matchInfo.status === 'loading') return;
		matchInfo.status = 'loading';
		setTimeout(() => {
			getMainMatchList();
		}, 300)
	}
	const getMainMatchList = async () => {
		const res = await $Api.match.getMainMatchList({
			page: matchInfo.page,
			lat: addressInfo.value.latitude,
			lng: addressInfo.value.longitude,
			type: matchInfo.type,
			radius: 50
		});
		if (res.code == 1) {
			setTimeout(() => { //重置下拉刷新
				itemLoading.value = false;
				matchInfo.triggered = false;
			}, 300)
			if (res.data && res.data.list.length > 0) {
				let arr = [];
				arr = res.data.list.map(val => {
					let imageList = [];
					let countDownInfo = {
						status: 0,
					};
					let avatarList = [];
					if (val.juli) {
						val.juli = handleDistance(val.juli);
					}
					if (val.image) {
						if (typeof val.image === 'string') {
							imageList = val.image.split(',');
						} else if (Array.isArray(val.image)) {
							val.image.forEach(item => {
								imageList.push(item.url);
							})
						}
					};
					if (val.member && val.member.length > 0) {
						val.member.forEach(item => {
							avatarList.push(item.avatar);
						})
					};
					if (val.status == 0) { //赛事未结束判断状态
						countDownInfo = computeDate(val.sign_start_date, val.sign_end_date, val.match_date)
					} else { //赛事已经结束
						countDownInfo = {
							status: -1,
						}
					}
					return {
						...val,
						imageList: imageList,
						countDownInfo,
						avatarList
					}
				})
				matchInfo.list = [...matchInfo.list, ...arr];
				// console.log('matchInfo.list', matchInfo.list);
			}
			if (res.data.totalPage > matchInfo.page) {
				matchInfo.status = 'loadmore';
				matchInfo.page++;
			} else {
				matchInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const computeDate = (startDate, endDate, matchDate) => {
		if (!isMillisecondTimestamp(startDate)) { //判断毫秒级时间戳
			startDate = startDate * 1000
		}
		if (!isMillisecondTimestamp(endDate)) { //判断毫秒级时间戳
			endDate = endDate * 1000
		}
		if (!isMillisecondTimestamp(matchDate)) { //判断毫秒级时间戳
			matchDate = matchDate * 1000
		}
		let newDate = new Date().getTime();
		if (newDate > matchDate) { //赛事进行中
			return {
				status: 3,
			}
		} else if (newDate > endDate && newDate <= matchDate) { //报名已经结束，比赛未开始
			let obj = {}
			obj = countDown(matchDate);
			return {
				status: 2,
				...obj
			}
		} else if (newDate > startDate && newDate <= endDate) { //报名进行中，距结束多少时间
			let obj = {}
			obj = countDown(endDate);
			return {
				status: 1,
				...obj
			}
		} else if (newDate <= startDate) { //报名未开始 距开始多少时间
			let obj = {}
			obj = countDown(startDate);
			return {
				status: 0,
				...obj
			}
		}
	}
	const changeTab = (e) => {
		matchInfo.type = e.label;
		console.log(e);
		matchInfo.triggered = false; //关闭下拉刷新
		restList();
	}
	const restList = () => {
		matchInfo.list = [];
		matchInfo.page = 1;
		matchInfo.status = 'loadmore';
		itemLoading.value = true;
		if (scrollTop.value == 0.01) { //执行滚动
			scrollTop.value = 0.011
		} else {
			scrollTop.value = 0.01;
		}
		getMainMatchList();
	}
	const chooseLocationTap = async () => { //选择地理位置
		const res = await chooseLocation(userStore.addressInfo?.latitude, userStore.addressInfo?.longitude);
		if (res.districtInfo) {
			userStore.addressInfo = res;
			restList();
		}
	}
</script>
<style>
	page {
		/* background: linear-gradient(235deg, rgba(33, 89, 97, 1) 0%, rgba(18, 50, 55, 1) 27%, rgba(38, 103, 113, 1) 100%); */
	}

	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>
<style lang="scss" scoped>
	.main-box {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.activity-head {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 12rpx;
		box-sizing: border-box;

		.head-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.head-info {
			width: 100%;
			box-sizing: border-box;
			height: 76rpx;
			flex-shrink: 0;
			padding: 0 48rpx;
		}

		.address {
			max-width: 228rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: rgba(255, 255, 255, 0.87);
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			margin: 0 8rpx;
		}

		.name-box {
			padding: 0 48rpx;
		}

		.activity-head-name {
			display: block;
			background: linear-gradient(to right, #5FD2C1, #7CE0A0);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 58rpx;
			font-weight: 800;
		}

		.activity-head-enName {
			display: block;
			font-size: 20rpx;
			font-weight: 400;
			color: #48856C;
			line-height: 48rpx;
		}
	}

	.tab-list {
		flex-shrink: 0;
		// margin-top: 12rpx;
		// background: linear-gradient(to bottom, RGBA(25, 28, 31, 0), RGBA(25, 28, 31, 1));
	}

	.main {
		display: flex;
		overflow: hidden;
		padding: 0 20rpx;
		flex: 1;
		// background: #47bfd2, linear-gradient(233deg,rgba(0,0,0,0.74) 37%, rgba(0,0,0,0.46) 76%, rgba(0,0,0,0.46) 13%);
		// background: linear-gradient(to bottom, RGBA(25, 28, 31, 0), RGBA(25, 28, 31, 1));
		// transform: translateY(-50rpx);
	}
</style>